  <template>
  <j-modal
    :title="title"
    :width="width"
    :visible="visible"
    :confirmLoading="confirmLoading"
    switchFullscreen
    @ok="handleOk"
    @cancel="handleCancel"
    cancelText="关闭">
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="form" :model="model" :rules="validatorRules">
        <div id="view">
          <img id="view1" src="http://127.0.0.1:38088/video=stream&camidx=0" alt="主摄像头">
<!--          <img id="view2" src="http://127.0.0.1:38088/video=stream&camidx=1" alt="副摄像头">-->
        </div>
        <!-- 缩略图 -->
        <div id="suoluetu"></div>
        <!-- 功能按钮 -->
        <div class="table-operator">
          <br>
<!--          <button onclick="open_view1()">打开主头视频</button>-->
          <a-button @click="open_view1()" type="primary">打开主头视频</a-button>
          <a-button @click="close_view1()" type="primary">关闭主头视频</a-button>
          <a-button @click="rotate(90)" type="primary">左转</a-button>
          <a-button @click="rotate(270)" type="primary">右转</a-button>
          <button onclick="open_deskew()">开启主头纠偏显示</button>
          <br>
          <a-button @click="scan(0)" type="primary" >主头拍照</a-button>
          <a-button @click="save_image_scan()" type="primary" >主头拍照并保存本地</a-button>
<!--          <button onclick="save_image_scan()">主头拍照并保存本地</button>-->
          <button onclick="flattening_scan()">展平拍照</button>
          <button onclick="open_auto_scan()">开启自动拍照</button>
          <button onclick="close_auto_scan()">关闭自动拍照</button>
          <br>
          <button onclick="open_a3a4()">开启A3A4幅面自动切换</button>
          <button onclick="close_a3a4()">关闭A3A4幅面自动切换</button>
        </div>
        <!-- PDF -->
        <div>
          <button onclick="add_pdf()">拍照并添加到PDF队列</button>
          <button onclick="save_pdf()">生成PDF文件</button>
        </div>
        <!-- 设备 -->
        <div>
          <button onclick="getequipmenttype()">获取设备型号</button>
          <button onclick="getsonixserialnumber()">获取设备序列号</button>
          <button onclick="get_status()">获取设备状态</button>
          <button onclick="is_connect()">判断设备是否连接</button>
        </div>
        <!-- 操作日志 -->
        <div id="mylog">首次打开页面，没有显示出分辨率信息？不要急，刷新下页面就可以了<br>我是操做日志，如果我出现问题，请看控制台信息......</div>
      </a-form-model>
    </a-spin>
  </j-modal>
</template>

<script src="./static/style.js"></script>
<!--<script src="./api/gaopaiyi.js"></script>-->
<script src="./api/serialport.js"></script>
<script src="./api/pdf.js"></script>
<script src="./api/person.js"></script>
<script src="./api/equipment.js"></script>
<script src="./customized/thumbnail_customized.js"></script>

<script>

// import { getAction, httpAction, postAction,postActionNoDes,httpActionNew } from '@/api/manage'
  import axios from 'axios'
// import { axios } from '@/utils/request'
  import { validateDuplicateValue } from '@/utils/util'
 

  export default {
    name: "DaMlModal",
    components: {  
    },
    data () {
      return {
        title:"操作",
        width:800,
        visible: false,
        model:{
         },
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },

        confirmLoading: false,
        validatorRules: {
        },
        url: {
          add: "/ml/daMl/add",
          edit: "/ml/daMl/edit",
        },
        expandedRowKeys:[],
        pidField:"pid"
     
      }
    },
    created () {
       //备份model原始值
       this.modelDefault = JSON.parse(JSON.stringify(this.model));

    },
    methods: {
      showwindow(){
        this.visible = true;
      },
      // 打开主头视频
      open_view1(){
        document.getElementById('view1').src = 'http://127.0.0.1:38088/video=stream&camidx=0';
        this.my_log('打开主头成功');
      },
      // 关闭主头视频
      close_view1(){ 
        let data = {"camidx": "0"}
        axios.post("http://127.0.0.1:38088/video=close", JSON.stringify(data)).then(()=>{
          document.getElementById('view1').src = ''
          this.my_log('关闭主摄像头成功')
        }) 
      },
// 拍照，本示例为拍照获取base64数据
      scan(view){  
        let data = {
          "filepath": "base64",
          "rotate": "0",
          "cutpage": "0",
          "camidx": "0",
          "ColorMode": "0",
          "quality": "3",
          "deskew":"1",
          "bAutoAdjust":"1"
        }
        axios.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data)).then((res)=>{
          // add_image(res.data.photoBase64)
          this.my_log("主头拍照成功")
          this.my_log('图片base64： ' + res.data.photoBase64)
        })
      },
      rotate(angle){
        let data = {"camidx": '0', "rotate": String(angle)}
        axios.post("http://127.0.0.1:38088/video=rotate", JSON.stringify(data)).then((res)=>{
          this.my_log("旋转" + String(angle) + "度成功")
        })

      },
      // 右转
      rotate270(){
        let  data = {
          "camidx": "0",
          "rotate": "270"
        }
        axios({url:"/gpy/video=rotate",  data:data,
          headers: {"Access-Control-Allow-Origin": "*"},method:'post'}
        ).then((res) =>
        {
          this.my_log("旋转成功");
          // add_img(res.photoBase64);
        })
      },
      // 主头拍照并保存本地
      save_image_scan(){
        let data = {
          "filepath": "D:\\a.jpg",
          "rotate": "0",
          "cutpage": "0",
          "deskew": "1",
          "deskewval": "-20",
          "camidx": "0",
          "ClolorMode": "0",
          "quality": "0"
        }
        axios({url:"/gpy/video=grabimage",  data:data,
          headers: {"Access-Control-Allow-Origin": "*"},method:'post'}
        ).then((res) =>
        {
          my_log("拍照成功，图片保存在D:\\a.jpg");
          // add_img(res.photoBase64);
        })
        // $.post("http://127.0.0.1:38088/video=grabimage", JSON.stringify(data), function(res){
        //   if(res.code == '0')
        //   {
        //     my_log("拍照成功，图片保存在D:\\a.jpg")

            // 添加到缩略图
            // let img = document.createElement('img');
            // img.id = 'hu' + String(Math.random());
            // img.src = "D:\\a.jpg";
            // img.oncontextmenu = showOperation;
            // img.style.width = '80px';
            // img.style.height = '80px';
            // document.getElementById('my_thumbnail').appendChild(img)
        //   }
        // })
      },
      // 用于输出日志信息
      my_log(msg){
        let element = document.getElementById('mylog')
        let old_val = element.innerHTML
        let date = new Date().toString().slice(16, 24)
        element.innerHTML = date + '&nbsp;&nbsp;' + msg + '<br>' + old_val;
      },

      add (obj) {
        this.modelDefault.pid=''
        this.edit(Object.assign(this.modelDefault , obj));
      },
      edit (record) {
        this.model = Object.assign({}, record);
        this.visible = true;
      },
      close () {
        this.$emit('close');
        this.visible = false;
        this.$refs.form.clearValidate()
      },
      handleOk () {
        const that = this;
        // 触发表单验证
       this.$refs.form.validate(valid => {
          if (valid) {
            that.confirmLoading = true;
            let httpurl = '';
            let method = '';
            if(!this.model.id){
              httpurl+=this.url.add;
              method = 'post';
            }else{
              httpurl+=this.url.edit;
               method = 'put';
            }
             if(this.model.id && this.model.id === this.model[this.pidField]){
              that.$message.warning("父级节点不能选择自己");
              that.confirmLoading = false;
              return;
            }
            httpAction(httpurl,this.model,method).then((res)=>{
              if(res.success){
                that.$message.success(res.message);
                this.$emit('ok');
              }else{
                that.$message.warning(res.message);
              }
            }).finally(() => {
              that.confirmLoading = false;
              that.close();
            })
          }else{
             return false
          }
        })
      },
      handleCancel () {
        this.close()
      },
      submitSuccess(formData,flag){
        if(!formData.id){
          let treeData = this.$refs.treeSelect.getCurrTreeData()
          this.expandedRowKeys=[]
          this.getExpandKeysByPid(formData[this.pidField],treeData,treeData)
          this.$emit('ok',formData,this.expandedRowKeys.reverse());
        }else{
          this.$emit('ok',formData,flag);
        }
      },
      getExpandKeysByPid(pid,arr,all){
        if(pid && arr && arr.length>0){
          for(let i=0;i<arr.length;i++){
            if(arr[i].key==pid){
              this.expandedRowKeys.push(arr[i].key)
              this.getExpandKeysByPid(arr[i]['parentId'],all,all)
            }else{
              this.getExpandKeysByPid(pid,arr[i].children,all)
            }
          }
        }
      }

      
    }
  }


  // 传递图片base64，缩略图框生成图片用来显示,并添加到PDF队列
  function add_img(img_base64){
    let img = document.createElement('img');
    img.id = 'hu' + String(Math.random());
    img.src = "data:image/jpg;base64," + img_base64;
    img.oncontextmenu = showOperation;
    img.style.width = '80px';
    img.style.height = '80px';
    document.getElementById('my_thumbnail').appendChild(img)
  }
</script>
<style>
/* 全局 */
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  margin-top: 10px;
}
/* 视频预览 */
#view1, #view2{
  width: 400px;
  height: 300px;
  border: 1px solid red;
  margin-right: 5px;
}
/* 缩略图 */
#suoluetu{
  width: 100%;
  height: 85px;
  border: 1px solid blue;
}
#suoluetu img{
  margin-right: 10px;
}
/* 操作按钮 */
#myactive{
  border: 1px solid yellowgreen;
  margin-top: 10px;
  padding: 10px 5px;
}
/* 操作日志 */
#mylog{
  border: 1px solid black;
  padding: 10px;
  margin-top: 10px;
  overflow: auto;
}
</style>